<script setup>
    import {ref} from 'vue'
    import {useUserStore} from '@/stores/user'
    import { useRouter } from 'vue-router';
    // import 'element-plus/es/components/message/style/css' 官方导入的文件会覆盖掉初始颜色
    import 'element-plus/theme-chalk/el-message.css'
    import {ElMessage} from 'element-plus'
    // 表单校验（账号名+密码）
    // 1. 准备表单对象
    const form = ref({
        account: '',
        password: ''
    })
    // 2. 准备规则对象
    const rules = {
        account: [
            {required: true, message: '用户名不能为空', trigger: 'blur'},
            {min: 6, max: 16, message: '用户名为6~16位', trigger: 'blur'}
        ],
        password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 14, message: '密码为6~14位', trigger: 'blur'}
        ],
        agree: [
            {
                validator: (rule, value, callback) => {
                    // console.log(value);
                    // 自定义校验逻辑
                    // 勾选了就通过，不勾选，就不通过 
                    if (value) {
                        callback()
                    } else {
                        callback(new Error('请勾选同意'))
                    }
                }
            }
        ]
    }

    // 3. 获取form实例做统一校验
    const router = useRouter()
    const formRef = ref(null)
    const {getUserInfo} = useUserStore()
    function doLogin() {
        // 调用实例方法
        const {account, password} = form.value
        formRef.value.validate(async (valid) => {
            // console.log(valid);
            if (valid) { // 所有校验都通过，valid才为true 
               getUserInfo(account, password)
               
               ElMessage({
                type: 'success',
                message: '登陆成功'
               })
               router.replace('/')
            }
        })
    }
</script>


<template>
    <div>
        <header class="login-header">
            <div class="container">
                <h1>
                    <a href="javascript:;">小兔鲜</a>
                </h1>
                <RouterLink to="/" class="entry">
                    进入网站首页
                    <i class="iconfont icon-angle-right"></i>
                    <i class="iconfont icon-angle-right"></i>
                </RouterLink>
            </div>
        </header>
        <section class="login-section">
            <div class="wrapper">
                <nav>
                    <a href="javascript:;">账户登录</a>
                </nav>
                <div class="account-box">
                    <div class="form">
                        <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px" status-icon>
                            <el-form-item prop="account" label="账户">
                                <el-input v-model="form.account"></el-input>
                            </el-form-item>
                            <el-form-item prop="password" label="密码">
                                <el-input v-model="form.password"></el-input>
                            </el-form-item>
                            <el-form-item label-width="22px" prop="agree">
                                <el-checkbox size="large" v-model="form.agree">
                                    我已同意隐私条款和服务条款
                                </el-checkbox>
                            </el-form-item>
                            <el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
                        </el-form>
                    </div>
                </div>
            </div>
        </section>
        <footer class="login-footer">
            <div class="conatiner">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜儿</p>
            </div>
        </footer>
    </div>
    
</template>


<style scoped lang='scss'>
    .login-header{
        background: #fff;
        border-bottom: 1px solid #e4e4e4;
        .container{
            display: flex;
            justify-content: space-between;
                h1{
                width: 200px;
                a{
                    display: block;
                    width: 100%;
                    height: 132px;
                    background: url('@/assets/images/logo.png') no-repeat left/ 100%;
                    text-indent: -999px;
                }
            }
            .entry{
                align-self: self-end;
                width: 120px;
                margin-bottom: 38px;
                font-size: 16px;
                i{
                    font-size: 14px;
                    color: $xtxColor;
                    letter-spacing: -5px;
                }
            }
        }
        
    }

    .login-section{
        position: relative;
        background: url('@/assets/images/login-bg.png') no-repeat center / cover;
        height: 488px;
        .wrapper{
            position: absolute;
            width: 380px;
            background: #fff;
            left: 50%;
            top: 54px;
            transform: translateX(100px);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
            nav{
                height: 55px;
                line-height: 55px;
                padding: 0 40px;
                text-align: center;
                font-size: 18px;
                border-bottom: 1px solid #f5f5f5;
                margin-bottom: 20px;
            }
            .account-box{
                .form{
                    padding: 0 20px 20px 20px;
                    .subBtn {
                    background: $xtxColor;
                    width: 100%;
                    color: #fff;
                    }
                }
            }
        }
    }

    .login-footer{
        text-align: center;
        padding: 30px 0 50px;
        background: #fff;
        p{
            margin: 20px 0;
            color: #999;
            a{
                color: #999;
                padding: 0 10px;
                border-right: 1px solid #ccc;
                line-height: 1;
                display: inline-block;
                &:last-child{
                    border: none;
                }
            }
        }
    }
</style>